@baseColor: #e92322;
body {
  height: 3000px;
}
.wjs_header {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  text-align: center;
  .row {
    > div:nth-child(-n + 3) {
      border-right: 1px solid #ccc;
    }
  }
  .wjs_code {
    position: relative;
    display: block;
    img {
      position: absolute;
      left: 50%;
      top: 49px;
      transform: translateX(-50%);
      border: 1px solid #ccc;
      border-top: none;
      display: none;
      z-index: 999;
    }
    &:hover {
      img {
        display: block;
      }
    }
  }
  .register {
    padding: 6px 10px;
    background-color: @baseColor;
  }
  .login {
    color: #333;
    &:hover {
      text-decoration: none;
    }
  }
}
.wjs_nav {
  margin-bottom: 0;
  .navbar-brand {
    height: 80px;
    line-height: 50px;
    span {
      font-size: 40px;
      &:first-of-type {
        color: @baseColor;
      }
      &:last-of-type {
        color: #000;
      }
    }
  }
  .nav {
    li {
      a {
        height: 80px;
        line-height: 50px;
        font-size: 16px;
        &:hover,
        &:focus {
          border-bottom: 3px solid @baseColor;
          color: #777;
        }
      }
      &.active {
        a,
        a:hover,
        a:focus {
          background-color: transparent;
          border-bottom: 3px solid @baseColor;
        }
      }
    }
  }

  .navbar-toggle {
    margin-top: 23px;
  }
}
.wjs_banner {
  .pcImg {
    display: block;
    height: 410px;
    background-position: center center;
    background-size: cover;
  }
  .mobileImg {
    display: block;
    width: 100%;
    img {
      width: 100%;
      display: block;
    }
  }
}
.wjs_info {
  padding: 40px 0;
  cursor: pointer;
  .media {
    margin: 10px 0;
    span {
      font-size: 30px;
    }
    &:hover {
      color: @baseColor;
    }
  }
}
.wjs_reverse {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 15px 0;
  margin-top: -15px;
  .row {
    > div:first-of-type {
      a:hover {
        color: @baseColor;
      }
      .reverse-now {
        color: @baseColor;
        border-bottom: 1px dashed @baseColor;
      }
    }
    > div:last-of-type {
      a:hover {
        color: @baseColor;
      }
    }
  }
}
.wjs_product {
  background-color: #eee;
  .container {
    .nav-tabs {
      li {
        a {
          line-height: 50px;
          margin-right: 15px;
          &:hover {
            border-bottom: 2px solid @baseColor;
          }
        }
        &.active {
          a {
            background-color: #eee;
            border: 1px solid transparent;
            border-bottom: 2px solid @baseColor;
          }
        }
      }
    }
    .tab-content {
      padding-top: 20px;
      .row {
        > div {
          margin-bottom: 20px;
          .wrapper {
            position: relative;
            height: 150px;
            color: #fff;
            box-sizing: border-box;
            background-color: @baseColor;
            .left {
              position: relative;
              margin-right: 100px;
              height: 100%;
              border-right: 1px dashed #ccc;
              .title {
                position: relative;
                text-align: center;
                font-size: 16px;
              }
              .wrapper-box {
                padding: 0 10px;
                .wrapper-right {
                  text-align: right;
                }
              }
            }
            .right {
              position: absolute;
              right: 0;
              top: 0;
              width: 100px;
              height: 100%;
              padding-top: 35px;
              text-align: center;
              .num {
                span:first-of-type {
                  font-size: 40px;
                  font-weight: bold;
                }
              }
              &::before,
              &::after {
                content: "";
                position: absolute;
                left: -5px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #eee;
              }
              &::before {
                top: -5px;
              }
              &::after {
                bottom: -5px;
              }
            }
          }
        }
        > div:nth-child(1) {
          .title::before {
            content: "\e915";
            position: absolute;
            font-family: "wjs";
            left: 0;
            top: -5px;
            font-size: 25px;
          }
        }
        > div:nth-child(2),
        > div:nth-child(3) {
          .wrapper {
            background-color: #fff;
            color: #333;
            .left {
              .title {
                color: @baseColor;
              }
            }
            .right {
              color: @baseColor;
            }
          }
        }
        > div:nth-child(2) {
          .wrapper {
            .right {
              padding-top: 15px;
              .pTip {
                margin-left: -10px;
                span:first-of-type {
                  border: 1px solid blue;
                  color: blue;
                  cursor: pointer;
                }
                span:last-of-type {
                  border: 1px solid green;
                  color: green;
                  cursor: pointer;
                }
              }
            }
          }
        }
        //模拟标题插件
        // > div:nth-child(2) {
        //   .wrapper {
        //     .right {
        //       padding-top: 13px;
        //       .icon {
        //         a {
        //           display: inline-block;
        //           padding: 0 3px;
        //           font-size: 12px;

        //           &:first-of-type,
        //           &:last-of-type {
        //             position: relative;
        //             border: 1px solid blue;
        //             color: blue;
        //             margin-right: 3px;
        //             &:hover {
        //               > i {
        //                 opacity: 1;
        //                 z-index: 1;
        //               }
        //             }
        //             > i {
        //               position: absolute;
        //               top: -33px;
        //               left: -16px;
        //               width: 50px;
        //               height: 23px;
        //               line-height: 23px;
        //               background-color: #000;
        //               color: #fff;
        //               font-style: normal;
        //               text-align: center;
        //               border-radius: 3px;
        //               opacity: 0;
        //               transition: opacity 0.3s;
        //               &::before {
        //                 content: "";
        //                 position: absolute;
        //                 bottom: -10px;
        //                 left: 50%;
        //                 width: 0;
        //                 height: 0;
        //                 border-width: 5px;
        //                 border-style: solid;
        //                 transform: translateX(-50%);
        //                 border-color: #000 transparent transparent transparent;
        //               }
        //             }
        //           }
        //           &:last-of-type {
        //             border: 1px solid green;
        //             color: green;
        //           }
        //         }
        //       }
        //     }
        //   }
        // }
      }
    }
  }
}
.wjs_news {
  .row {
    > div:nth-child(1) {
      h2 {
        position: relative;
        text-align: center;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        &::before {
          content: "";
          position: absolute;
          right: 0;
          bottom: -4px;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          border: 1px solid #ccc;
          background-color: #fff;
        }
      }
    }
    .nav-tabs {
      position: relative;
      border-bottom-color: transparent;
      li {
        &.active {
          a {
            background-color: @baseColor !important;
          }
        }
        margin-bottom: 30px;
        margin-right: 25px;
        &:last-of-type {
          margin-bottom: 0;
          margin-right: 0;
        }
        a {
          background-color: #eee !important;
          border: none !important;
          border-radius: 50%;
          width: 60px;
          height: 60px;
          font-size: 30px;
          &:hover {
            background-color: @baseColor !important;
          }
        }
      }
    }
  }
}
@media screen and (min-width:992px) {
  .nav-tabs::before{
    content: '';
    position: absolute;
    left: 30px;
    height: 300px;
    border-left: 1px dashed @baseColor;
  }
}
@media screen and (max-width:768px) { 
  .nav-tabs li {
    width: 25%;
    margin-right: 0 !important;
  }
}